<template>
  <div>
    <el-header>
      <div class="crumbs">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/console">
            <i class="el-icon-s-home"></i>
            <span style="margin-left: 5px">首页</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item>{{
              $route.meta.title
            }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        ></el-avatar>
        <el-dropdown trigger="click" @command="selectedItem">
					<span class="el-dropdown-link">
						{{ userInfo.nickname }}
						<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="changeInfo">修改信息</el-dropdown-item>
            <!-- <el-dropdown-item command="changeInfo" :style="`background:${url}`">修改信息</el-dropdown-item> -->
            <el-dropdown-item command="logout"
            >退出登录
            </el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
          <span>这是一段信息</span>
          <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
        </el-dialog>
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo.data
    },
  },
  created() {
  },

  methods: {
    logout() {
      this.$confirm('退出后需重新登录,是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
          .then(() => {
            this.$router.push('/')

            this.$message({
              type: 'success',
              message: '退出登录成功!',
            })

            // 清除localstorage和sessionStorage
          })
          .catch(() => {
            /* 	this.$message({
                type: 'info',
                message: '取消操作!',
              }) */
          })
    },
    changeInfo() {
      this.dialogVisible = true
      console.log('修改信息')
    },
    selectedItem(operation) {
      switch (operation) {
        case 'logout':
          this.logout()
          break
        case 'changeInfo':
          this.changeInfo() 
          break
      }
    },
    handleClose(done) {
      /* this.$confirm('确认关闭？')
          .then(_ => {
              done();
          })
          // .catch(_ => {}); */
      this.dialogVisible = false
    },
    submit() {
      console.log("确定")
      this.dialogVisible = false
    }
  },
}
</script>

<style scoped lang='scss'>
.el-header {
  background-color: #34495e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 3px 3px 10px #34495e;

  .crumbs {
    .el-breadcrumb__inner {
      color: #fff !important;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #ccc;
    margin-left: 10px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>
